import { Modal, ModalProps } from 'antd';
import React from 'react';

import ModalsFooter from './ModalsFooter';
import './styles.scss';

interface ModalsProps extends ModalProps {
  onOk?: () => void;
  onCancel?: () => void;
  onAllCancel?: () => void;
  children?: React.ReactNode;
  okText?: string | React.ReactNode;
  cancelText?: string | React.ReactNode;
  footerCancelHidden?: boolean;
  footerAllCancelHidden?: boolean;
  footerOkHidden?: boolean;
  footerCancelDisabled?: boolean;
  footerOkDisabled?: boolean;
  confirmLoading?: boolean; // 添加此类型
  cancelLoading?: boolean;
  maskClosable?: boolean;
  headerHeight?: number;
  footerHeight?: number;
  footer?: null | React.ReactNode;
  line?: boolean;
  onClose?: () => void;
  height?: number;
  modelContentClassName?: string;
  isDisplay?: boolean;
}

const Modals: React.FC<ModalsProps> = ({
  onOk,
  onCancel,
  onAllCancel,
  children,
  okText = '确定',
  cancelText = '取消',
  footerCancelHidden = false,
  footerOkHidden = false,
  footerCancelDisabled = false,
  footerAllCancelHidden = true,
  footerOkDisabled = false,
  confirmLoading = false,
  cancelLoading = false,
  maskClosable = false,
  headerHeight,
  footerHeight,
  footer,
  line = true,
  onClose,
  height,
  modelContentClassName,
  isDisplay = false,
  ...props
}) => {
  const Footer = () => {
    if (footer === null) {
      return <></>;
    }

    if (footer !== null && footer !== undefined) {
      return footer;
    }

    return (
      <ModalsFooter
        okText={okText}
        cancelText={cancelText}
        footerCancelHidden={footerCancelHidden}
        footerAllCancelHidden={footerAllCancelHidden}
        footerOkHidden={footerOkHidden}
        footerCancelDisabled={footerCancelDisabled}
        footerOkDisabled={footerOkDisabled}
        confirmLoading={confirmLoading}
        cancelLoading={cancelLoading}
        onOk={onOk}
        onCancel={onCancel}
        onAllCancel={onAllCancel}
        line={line}
        isDisplay={isDisplay}
      />
    );
  };

  return (
    <Modal
      {...props}
      onCancel={onClose || onCancel}
      footer={Footer} // 使用组件渲染 Footer
      classNames={{
        content: '!p-0',
        header: '!p-[16px] !m-0 ',
        // body: '!p-[16px] overflow-auto',
        footer: '!m-0',
      }}
      centered
      maskClosable={maskClosable}
      styles={{
        header: {
          borderBottom: '1px solid #e5e6eb',
        },
        // body: {
        //   maxHeight: `calc(100vh - ${headerHeight ? headerHeight : '56px'} - 48px - ${
        //     footerHeight ? footerHeight : '56px'
        //   })`,
        // },
        footer: {
          // borderTop: '1px solid #e5e6eb',
        },
      }}
    >
      <div
        className={`modalsContent mr-3 overflow-auto p-6 pr-2 ${modelContentClassName}`}
        style={{
          maxHeight: `calc(100vh - ${headerHeight || '56px'} - 96px - ${footerHeight || '56px'})`,
          height: height ?? 'auto',
        }}
      >
        {children}
      </div>
    </Modal>
  );
};

export default Modals;
